<template>
  <footer class="text-center position-relative">
    <nav class="position-absolute d-inline-flex bg-primary-200
      px-2 px-xs-4 px-md-10 py-1 py-xs-2 py-md-3">
      <ul class="list-inline z-index-2">
        <li class="list-inline-item text-white-80">
          <router-link class="text-decoration-none px-1 mr-1 px-xs-2 mr-xs-2 hover--shadowLine"
            :to="{ name: 'Home' }">Home</router-link>|</li>
        <li class="list-inline-item text-white-80">
          <router-link class="text-decoration-none px-1 mr-1 px-xs-2 mr-xs-2 hover--shadowLine"
            :to="{ name: 'Products' }">Product</router-link>|</li>
        <li class="list-inline-item text-white-80">
          <router-link class="text-decoration-none px-1 mr-1 px-xs-2 mr-xs-2 hover--shadowLine"
            :to="{ name: 'About' }">About</router-link>|</li>
        <li class="list-inline-item text-white-80">
          <router-link class="text-decoration-none px-1 mr-1 px-xs-2 mr-xs-2 hover--shadowLine"
            :to="{ name: 'Cart' }">Cart</router-link></li>
      </ul>
    </nav>
  </footer>
</template>
